<template>
  <div>
    <input type="checkbox" class="checkbox-input" :checked="modelValue" @change="updateValue" />
    <label :for="labelId" class="checkbox-label">{{ label }}</label>
  </div>
</template>

<script>
export default {
  name: 'MCheckbox',
  props: {
    modelValue: {
      type: Boolean,
    },
    label: {
      type: String,
      default: 'Checkbox',
    },
    labelId: {
      type: String,
      default: () => `checkbox-${Math.random().toString(36).substr(2, 9)}`,
    },
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const updateValue = (event) => {
      emit('update:modelValue', event.target.checked);
    };

    return {
      updateValue,
    };
  },
};
</script>

<style scoped>
.checkbox-input {
  margin-right: 5px;
}

.checkbox-label {
  cursor: pointer;
  user-select: none;
}
</style>